<style lang="less" scoped>
@import "../assets/css/config.less";
*{
  margin: 0;
  padding: 0;
}
.flex-row{
  display: flex;
  justify-content: start;
}
.index {
  background: #f8f8f9;
}

.pageIndex {
  position: fixed;
  left: 0;
  top: 58px;
  z-index: 100;
  width: 100%;
  height: 58px;
  background: rgb(255, 255, 255);
  border-bottom: 1px solid #E8E8E8;
  display: flex;
  justify-content: center;
  align-items: center;
}

.button{
  line-height: 32px;
  height: 32px;
  background-color: @color1;
  color: @white;
  border-radius: 4px;
  font-size: 13px;
  width: 80px;
  outline: none;
  border: none;
  cursor: pointer;
  :hover{
    background-color: @color2;
  }
  &:disabled{
    background-color:@color4;
    border-color: @color5;
    color: @color5;
    cursor:  not-allowed;
  }
}

.item {
  margin: 4px;
}

.out {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
}

.collection {
  position: absolute;
  right: -25px;
  margin: 20px 10px;
}

.ques_content {
  // width: 80%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
}
.ques_content p:first-of-type {
  font-weight: bold;
}

.check {
  position: absolute;
  margin-top: 30px;
  left: 50%;
  margin-left: 300px;
}

.correctRate-title {
  margin-top: 15px;
  font-weight: 600;
  font-size: 14px;
  float: left;
}

.correctRate {
  font-size: 14px;
  color: @color2;
}

.backBeforeOne {
  position: relative;
  margin-top: 30px;
}

.point_title {
  font-weight: bold;
  font-size: 20px;
}

.point_content {
  margin-top: 10px;
  margin-right: 5px;
  margin-left: 5px;
  font-size: 14px;
  text-align: left;
}

.xuanxiang {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  margin: 15px 0;
}
.header{
  position: fixed;
  top:0;
  width: 100%;
  min-width: 1210px;
  z-index: 999;
}
// 兼容 chrome
.sider-out::-webkit-scrollbar {
    width: 10px;
    background-color: #eee;
}

.sider-out::-webkit-scrollbar-track {
    width: 10px;
    height: 1px;
}

.sider-out::-webkit-scrollbar-thumb {
  border-radius: 10px;
  box-shadow: inset 0 0 5px rgba(172, 170, 170, 0.2);
  background: #9b9898;
}

.sider-out {
  overflow: auto;
  height: 500px;
  padding: 15px 25px;
}
.left-out{
  width: 30%;
  border-right: 1px solid #d4d0d0;
}
.right-out{
  width: 70%;
  padding: 15px 25px 15px 40px;
}
</style>
<style lang="less">
@import "../assets/css/config.less";
.el-pagination.is-background .el-pager li:not(.disabled).active{
  background-color: @color2;
}
.number:hover{
  color: @color2!important;
}
  
</style>
<template>
  <div id="index">
    <div class="header">
      <myheader></myheader>
    </div>
    <Layout id="content" style="margin-top: 60px;background-color: white">
      <div class="flex-row" :style="{padding: '0 24px 24px','min-width': '1210px',margin: '0 auto'}">
        <div class="block pageIndex">
          <span class="demonstration" v-if="homework_question_list.length > 0">
            <div class="el-tooltip item el-pagination is-background">
              <button class="btn-prev" :disabled="currentPage===1?true:false" @click="pageDown">
                <i class="el-icon el-icon-arrow-left"></i>
              </button>
              <ul class="el-pager" v-for="i in homework_question_list.length" :key="i">
                <li
                  class="number"
                  :class="currentPage===i?'active':''"
                  @click="handleCurrentChange(i)"
                >{{i}}</li>
              </ul>
              <button
                class="btn-prev"
                :disabled="currentPage===homework_question_list.length?true:false"
                @click="pageUp"
              >
                <i class="el-icon el-icon-arrow-right"></i>
              </button>
            </div>
          </span>
        </div>
        <div :style="{padding: '50px 0 0 2px'}">
          <div
            id="point-content"
            :style="{padding: '24px', minHeight: '280px', background: '#fff'}"
            class="list out"
            :key="+new Date()"
          >
            
            <div class="flex-row" id="out">
              <div>
                <Card
                
                  style="position: relative;width:1200px;margin-bottom: 20px;text-align:left;margin-top: 20px;"
                >
                  <div class="flex-row">
                    <div class="left-out">
                      <div class="sider-out">
                        <p class="point_title">知识点：{{this_question.title}}</p>
                        <p class="point_content" v-html="this_question.content"></p>
                      </div>
                    </div>
                    <div class="right-out">
                      <p class="point_title">题目：</p>
                      <div style=" margin-top: 10px;" v-html="this_question.question"></div>
                      <div class="ques_content">
                        <RadioGroup
                          class="out"
                          v-if="this_question.type === 'panduan'"
                          v-model="radio_value"
                          :key="toString(Math.random())"
                        >
                          <Radio label="yes">
                            <span>正确</span>
                          </Radio>
                          <Radio label="no">
                            <span>错误</span>
                          </Radio>
                        </RadioGroup>

                        <CheckboxGroup
                          class="xuanxiang"
                          v-if="this_question.type === 'xuanze'"
                          v-model="checkbox_value"
                          :key="toString(Math.random())"
                        >
                          <Checkbox
                            v-for="(item, index) in this_question.items"
                            :label="index + 1 + ''"
                            :key="index"
                          > 
                            <span style="font-size: 14px;">{{"ABCDEFGHIJKLMNOPQRSTUVWXYZ"[index]}}</span>
                            <span style="font-size: 14px;">{{item}}</span>
                          </Checkbox>
                        </CheckboxGroup>
                        <div v-show="this_question.type === 'jianda'">
                          <div ref="editor" style="text-align:left;width:100%"></div>
                        </div>
                      </div>
                    </div>
                  </div>
                </Card>
                <button
                  v-if="currentPage !== homework_question_list.length"
                  class="button"
                  @click="nextproblem"
                  style="display:inline"
                >下一题</button>
                <button
                  v-if="currentPage === homework_question_list.length"
                  class="button"
                  @click="submit"
                  style="display:inline"
                >提交</button>
              </div>
              <div class="collection">
                <el-button @click="allAnswer" type="text">提问</el-button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </Layout>
  </div>
</template>

<script>
import header from "../components/header.vue";
import E from "wangeditor";
import { getQuestionList, add_workRecord } from "../api/api";
export default {
  name: "doHomework",
  data: function() {
    return {
      bg: {
        width: `${window.innerWidth}px`,
        height: "auto",
        overflow: "scroll"
      },
      temp: [],
      this_homeworkseq: "",
      currentPage: 1,
      questiontitle: "",
      radio_value: "",
      checkbox_value: [],
      homework_question_list: [],
      this_question: [],
      stu_answer: [],
      illustration_answer: [],
      question_answer: [],
      problem_num: 1,
      editorContent: "",
      collection: false
    };
  },
  created() {
    if (JSON.parse(sessionStorage.getItem("homework_seq")) != null) {
      this.this_homeworkseq = JSON.parse(
        sessionStorage.getItem("homework_seq")
      ).seq;
    }
    if (JSON.parse(sessionStorage.getItem("stu_answer")) != null) {
      this.stu_answer = JSON.parse(sessionStorage.getItem("stu_answer"));
    }
    if (JSON.parse(sessionStorage.getItem("page")) != null) {
      this.currentPage = JSON.parse(sessionStorage.getItem("page"));
    }
  },
  mounted() {
    window.onresize = () => {
      return (() => {
        let content_top = document.getElementById("content").offsetTop;
        this.bg.height = `${window.innerHeight - content_top - 2}px`;
        this.bg.width = `${window.innerWidth}px`;
        if (document.getElementById("pathbox") !== null) {
          setTimeout(() => {
            let pathBoxHeight = document.getElementById("pathbox").clientHeight;
            this.tagnumber = parseInt(pathBoxHeight / 35);
          }, 100);
        }
      })();
    };
    let content_top = document.getElementById("content").offsetTop;
    this.bg.height = `${window.innerHeight - content_top - 2}px`;
    // setTimeout(() => {
    //   var editor = new E(this.$refs.editor);
    //   editor.customConfig.onchange = html => {
    //     this.editorContent = html;
    //   };
    //   var url = "";
    //   if (process.env.NODE_ENV === "development") {
    //     url = "http://localhost:8080/api/uploadImg";
    //   } else if (process.env.NODE_ENV === "production") {
    //     url = "https://www.ourspark.org/api/uploadImg";
    //   }
    //   editor.customConfig.uploadImgServer = url;
    //   editor.customConfig.zIndex = 0;
    //   editor.create();
    //   editor.txt.html("添加作业内容，文字或图片");
    // }, 300);

    getQuestionList({
      UUID: this.$store.state.UUID,
      seq: this.this_homeworkseq
    })
      .then(response => {
        if (response.state === true) {
          this.homework_question_list = response.question_list;
          this.this_question = this.homework_question_list[
            this.currentPage - 1
          ];
          if (this.stu_answer.length === 0) {
            this.stu_answer = new Array(this.homework_question_list.length);
            var that = this;
            for (var m = 0; m < this.homework_question_list.length; m++) {
              this.stu_answer[m] = "no_answer";
            }
          } else {
            if (
              this.homework_question_list[this.currentPage - 1].type ===
              "panduan"
            ) {
              if (
                this.stu_answer[this.currentPage - 1] !== "" &&
                this.stu_answer[this.currentPage - 1] !== "no_answer"
              )
                this.radio_value = this.stu_answer[this.currentPage - 1];
            } else if (
              this.homework_question_list[this.currentPage - 1].type ===
              "xuanze"
            ) {
              if (
                this.stu_answer[this.currentPage - 1] !== "" &&
                this.stu_answer[this.currentPage - 1] !== "no_answer"
              )
                this.checkbox_value = this.stu_answer[this.currentPage - 1];
            } else {
              if (
                this.stu_answer[this.currentPage - 1] !== "" &&
                this.stu_answer[this.currentPage - 1] !== "no_answer"
              )
                this.editorContent = this.stu_answer[this.currentPage - 1];
            }
          }
          sessionStorage.setItem("stu_answer", JSON.stringify(this.stu_answer));
          setTimeout(() => {
            var editor = new E(this.$refs.editor);
            editor.customConfig.onchange = html => {
              this.editorContent = html;
            };
            var url = "";
            if (process.env.NODE_ENV === "development") {
              url = "http://localhost:8080/api/uploadImg";
            } else if (process.env.NODE_ENV === "production") {
              url = "https://www.ourspark.org/api/uploadImg";
            }
            editor.customConfig.uploadImgServer = url;
            editor.customConfig.zIndex = 0;
            editor.create();
            editor.txt.html(this.editorContent);
          }, 300);
        } else {
          this.$Message.error(response.msg);
        }
      })
      .catch(error => {
        this.$Message.error(error.status);
      });
  },
  components: {
    myheader: header
  },
  methods: {
    pageUp() {
      if (this.currentPage === this.homework_question_list.length) {
        return;
      }
      if (
        this.homework_question_list[this.currentPage - 1].type === "panduan"
      ) {
        this.stu_answer[this.currentPage - 1] = this.radio_value;
        sessionStorage.setItem("stu_answer", JSON.stringify(this.stu_answer));
      } else if (
        this.homework_question_list[this.currentPage - 1].type === "xuanze"
      ) {
        this.stu_answer[this.currentPage - 1] = this.checkbox_value;
        sessionStorage.setItem("stu_answer", JSON.stringify(this.stu_answer));
      } else {
        this.stu_answer[this.currentPage - 1] = this.editorContent;
        sessionStorage.setItem("stu_answer", JSON.stringify(this.stu_answer));
      }
      this.radio_value = "";
      this.checkbox_value = [];
      this.editorContent = "添加作业内容，文字或图片";
      this.currentPage++;
      this.this_question = this.homework_question_list[this.currentPage - 1];

      if (
        this.homework_question_list[this.currentPage - 1].type === "panduan"
      ) {
        if (
          this.stu_answer[this.currentPage - 1] !== "" &&
          this.stu_answer[this.currentPage - 1] !== "no_answer"
        )
          this.radio_value = this.stu_answer[this.currentPage - 1];
      } else if (
        this.homework_question_list[this.currentPage - 1].type === "xuanze"
      ) {
        if (
          this.stu_answer[this.currentPage - 1] !== "" &&
          this.stu_answer[this.currentPage - 1] !== "no_answer"
        )
          this.checkbox_value = this.stu_answer[this.currentPage - 1];
      } else {
        if (
          this.stu_answer[this.currentPage - 1] !== "" &&
          this.stu_answer[this.currentPage - 1] !== "no_answer"
        )
          this.editorContent = this.stu_answer[this.currentPage - 1];
      }
      setTimeout(() => {
        var editor = new E(this.$refs.editor);
        editor.customConfig.onchange = html => {
          this.editorContent = html;
        };
        var url = "";
        if (process.env.NODE_ENV === "development") {
          url = "http://localhost:8080/api/uploadImg";
        } else if (process.env.NODE_ENV === "production") {
          url = "https://www.ourspark.org/api/uploadImg";
        }
        editor.customConfig.uploadImgServer = url;
        editor.customConfig.zIndex = 0;
        editor.create();
        editor.txt.html(this.editorContent);
      }, 300);
    },
    pageDown() {
      if (this.currentPage === 1) {
        return;
      }
      if (
        this.homework_question_list[this.currentPage - 1].type === "panduan"
      ) {
        this.stu_answer[this.currentPage - 1] = this.radio_value;
        sessionStorage.setItem("stu_answer", JSON.stringify(this.stu_answer));
      } else if (
        this.homework_question_list[this.currentPage - 1].type === "xuanze"
      ) {
        this.stu_answer[this.currentPage - 1] = this.checkbox_value;
        sessionStorage.setItem("stu_answer", JSON.stringify(this.stu_answer));
      } else {
        this.stu_answer[this.currentPage - 1] = this.editorContent;
        sessionStorage.setItem("stu_answer", JSON.stringify(this.stu_answer));
      }
      this.radio_value = "";
      this.checkbox_value = [];
      this.editorContent = "添加作业内容，文字或图片";
      this.currentPage--;
      this.this_question = this.homework_question_list[this.currentPage - 1];

      if (
        this.homework_question_list[this.currentPage - 1].type === "panduan"
      ) {
        if (
          this.stu_answer[this.currentPage - 1] !== "" &&
          this.stu_answer[this.currentPage - 1] !== "no_answer"
        )
          this.radio_value = this.stu_answer[this.currentPage - 1];
      } else if (
        this.homework_question_list[this.currentPage - 1].type === "xuanze"
      ) {
        if (
          this.stu_answer[this.currentPage - 1] !== "" &&
          this.stu_answer[this.currentPage - 1] !== "no_answer"
        )
          this.checkbox_value = this.stu_answer[this.currentPage - 1];
      } else {
        if (
          this.stu_answer[this.currentPage - 1] !== "" &&
          this.stu_answer[this.currentPage - 1] !== "no_answer"
        )
          this.editorContent = this.stu_answer[this.currentPage - 1];
      }
      setTimeout(() => {
        var editor = new E(this.$refs.editor);
        editor.customConfig.onchange = html => {
          this.editorContent = html;
        };
        var url = "";
        if (process.env.NODE_ENV === "development") {
          url = "http://localhost:8080/api/uploadImg";
        } else if (process.env.NODE_ENV === "production") {
          url = "https://www.ourspark.org/api/uploadImg";
        }
        editor.customConfig.uploadImgServer = url;
        editor.customConfig.zIndex = 0;
        editor.create();
        editor.txt.html(this.editorContent);
      }, 300);
    },
    handleCurrentChange(val) {
      if (
        this.homework_question_list[this.currentPage - 1].type === "panduan"
      ) {
        this.stu_answer[this.currentPage - 1] = this.radio_value;
        sessionStorage.setItem("stu_answer", JSON.stringify(this.stu_answer));
      } else if (
        this.homework_question_list[this.currentPage - 1].type === "xuanze"
      ) {
        this.stu_answer[this.currentPage - 1] = this.checkbox_value;
        sessionStorage.setItem("stu_answer", JSON.stringify(this.stu_answer));
      } else {
        this.stu_answer[this.currentPage - 1] = this.editorContent;
        sessionStorage.setItem("stu_answer", JSON.stringify(this.stu_answer));
      }
      this.radio_value = "";
      this.checkbox_value = [];
      this.editorContent = "添加作业内容，文字或图片";
      this.currentPage = val;
      this.this_question = this.homework_question_list[this.currentPage - 1];

      if (
        this.homework_question_list[this.currentPage - 1].type === "panduan"
      ) {
        if (
          this.stu_answer[this.currentPage - 1] !== "" &&
          this.stu_answer[this.currentPage - 1] !== "no_answer"
        )
          this.radio_value = this.stu_answer[this.currentPage - 1];
      } else if (
        this.homework_question_list[this.currentPage - 1].type === "xuanze"
      ) {
        if (
          this.stu_answer[this.currentPage - 1] !== "" &&
          this.stu_answer[this.currentPage - 1] !== "no_answer"
        )
          this.checkbox_value = this.stu_answer[this.currentPage - 1];
      } else {
        if (
          this.stu_answer[this.currentPage - 1] !== "" &&
          this.stu_answer[this.currentPage - 1] !== "no_answer"
        )
          this.editorContent = this.stu_answer[this.currentPage - 1];
      }
      setTimeout(() => {
        var editor = new E(this.$refs.editor);
        editor.customConfig.onchange = html => {
          this.editorContent = html;
        };
        var url = "";
        if (process.env.NODE_ENV === "development") {
          url = "http://localhost:8080/api/uploadImg";
        } else if (process.env.NODE_ENV === "production") {
          url = "https://www.ourspark.org/api/uploadImg";
        }
        editor.customConfig.uploadImgServer = url;
        editor.customConfig.zIndex = 0;
        editor.create();
        editor.txt.html(this.editorContent);
      }, 300);
    },
    allAnswer(index) {
      sessionStorage.setItem("page", JSON.stringify(this.currentPage));
      this.$router.push({
        name: "allanswer",
        params: {
          menu: this.this_question.menu,
          point_id: this.this_question._id,
          point_title: this.this_question.title,
          question: this.this_question.question
        }
      });
    },
    nextproblem() {
      if (
        this.radio_value === "" &&
        this.checkbox_value.length === 0 &&
        this.editorContent === ""
      ) {
        this.$message({
          message: "你还没有作答哦",
          type: "warning"
        });
      } else {
        if (
          this.homework_question_list[this.currentPage - 1].type === "panduan"
        ) {
          this.stu_answer[this.currentPage - 1] = this.radio_value;
        } else if (
          this.homework_question_list[this.currentPage - 1].type === "xuanze"
        ) {
          this.stu_answer[this.currentPage - 1] = this.checkbox_value;
        } else {
          this.stu_answer[this.currentPage - 1] = this.editorContent;
        }
        sessionStorage.setItem("stu_answer", JSON.stringify(this.stu_answer));
        this.problem_num++;
        this.radio_value = "";
        this.checkbox_value = [];
        this.editorContent = "";
        this.currentPage++;
        this.this_question = this.homework_question_list[this.currentPage - 1];
        if (
          this.homework_question_list[this.currentPage - 1].type === "panduan"
        ) {
          if (
            this.stu_answer[this.currentPage - 1] !== "" &&
            this.stu_answer[this.currentPage - 1] !== "no_answer"
          )
            this.radio_value = this.stu_answer[this.currentPage - 1];
        } else if (
          this.homework_question_list[this.currentPage - 1].type === "xuanze"
        ) {
          if (
            this.stu_answer[this.currentPage - 1] !== "" &&
            this.stu_answer[this.currentPage - 1] !== "no_answer"
          )
            this.checkbox_value = this.stu_answer[this.currentPage - 1];
        } else {
          this.editorContent = this.stu_answer[this.currentPage - 1];
        }
        setTimeout(() => {
          var editor = new E(this.$refs.editor);
          editor.customConfig.onchange = html => {
            this.editorContent = html;
          };
          var url = "";
          if (process.env.NODE_ENV === "development") {
            url = "http://localhost:8080/api/uploadImg";
          } else if (process.env.NODE_ENV === "production") {
            url = "https://www.ourspark.org/api/uploadImg";
          }
          editor.customConfig.uploadImgServer = url;
          editor.customConfig.zIndex = 0;
          editor.create();
          editor.txt.html("添加作业内容，文字或图片");
        }, 500);

      }
    },
    submit() {
      if (
        this.radio_value === "" &&
        this.checkbox_value.length === 0 &&
        this.editorContent === ""
      ) {
        this.$message({
          message: "最后一题你还没有作答哦",
          type: "warning"
        });
      } else {
        if (
          this.homework_question_list[this.currentPage - 1].type === "panduan"
        ) {
          this.stu_answer[this.currentPage - 1] = this.radio_value;
        } else if (
          this.homework_question_list[this.currentPage - 1].type === "xuanze"
        ) {
          this.stu_answer[this.currentPage - 1] = this.checkbox_value;
        } else {
          this.stu_answer[this.currentPage - 1] = this.editorContent;
        }
        var is_done = true;
        var that = this;
        for (var n = 0; n < that.stu_answer.length; n++) {
          if (that.stu_answer[n] === "" || that.stu_answer[n] === "no_answer") {
            is_done = false;
            break;
          }
        }
        if (!is_done) {
          this.$message({
            message: "您还有题目未完成",
            type: "warning"
          });
        } else {
          sessionStorage.setItem("stu_answer", JSON.stringify(this.stu_answer));
          var temp = [];
          var that = this;
          for (var k = 0; k < this.stu_answer.length; k++) {
            temp.push([this.stu_answer[k]]);
          }
          var that = this;
          for (var z = 0; z < this.stu_answer.length-1; z++) {
            this.question_answer.push({
              pointId: this.homework_question_list[z]._id,
              questionId: this.homework_question_list[z].question_id,
              stu_answer: temp[z]
            });
          }
          this.$confirm("是否确定要提交作业", "提示", {
            confirmButtonText: "确认提交",
            cancelButtonText: "再想想"
          })
            .then(() => {
              let json = {};
              json = {
                flag: JSON.parse(this.$store.state.user).flags,
                UUID: this.$store.state.UUID,
                seq: this.this_homeworkseq,
                question_answer: this.question_answer
              };
              add_workRecord({
                flag: JSON.parse(this.$store.state.user).flags,
                UUID: this.$store.state.UUID,
                seq: this.this_homeworkseq,
                question_answer: this.question_answer
              })
                .then(response => {
                  if (response.state === true) {
                    this.$alert("作业提交成功！", "提示", {
                      confirmButtonText: "确定",
                      callback: action => {
                        this.illustration_answer.push(response.question_answer);
                        sessionStorage.removeItem("stu_answer");
                        this.$router.push({
                          name: "homeworkAnswer"
                        });
                      }
                    });
                  } else {
                    this.$Message.error(response.msg);
                  }
                })
                .catch(error => {
                  this.$Message.error(error.status);
                });
            })
            .catch(() => {});
        }
      }
    }
  }
};
</script>
